<template>
    <div>
        <indexHead/>
        <div class="py-container index">
		<!--banner-->
		<div class="banner">
			<img src="~/assets/images/banner.png" class="img-responsive" alt="">
		</div>
        	====================================={{sec_time}}
		<!--秒杀时间-->
		<div class="sectime">
			<div v-for="(v,k) in seckill_times" :class="{'item-time':true,active:k==0}" :key="k">
				<div class="time-clock">{{v.start_time}}</div>
				<div class="time-state-on">
					<span class="on-text">快抢中</span>
					<span class="on-over">距离结束：{{sec_time}}</span>
				</div>
			</div>
		</div>
		<!--商品列表-->
		<div class="goods-list">
			<ul class="seckill" id="seckill">
				<li class="seckill-item" v-for="(v,k) in seckill_goods" :key="k">
					<div class="pic">
						<img :src="v.pic" alt=''>
					</div>
					<div class="intro"><span>{{v.goods_name}}</span></div>
					<div class='price'><b class='sec-price'>￥{{v.cost_price}}</b><b class='ever-price'>￥{{v.price}}</b></div>
					<div class='num'>
						<div>已售{{Math.ceil((v.num-v.stock_count)/v.num*100)}}%</div>
						<div class='progress'>
							<div class='sui-progress progress-danger'><span style='width: 70%;' class='bar'></span></div>
						</div>
						<div>剩余<b class='owned'>{{v.stock_count}}</b>件</div>
					</div>
					<a class='sui-btn btn-block btn-buy' href='seckill-item.html' target='_blank'>立即抢购</a>
				</li>

			</ul>
		</div>

	</div>
    </div>
</template>

<script>
import indexHead from '~/components/head.vue'

import goodsApi from '~/api/good.js'

import '~/assets/style/pages-seckill-index.css'
import '~/assets/style/webbase.css'

export default {
    components:{
        indexHead
    },
    asyncData(){
        //查询秒杀商品列表数据
		return goodsApi.querySeckillGoods().then(res => {
            return{
                seckill_times:res.data.seckill_times,
                seckill_goods:res.data.seckill_goods
            }
		})
    },
    data(){
        return{
			sec_time:'',
			timer:null
        }
    },
    methods:{
        //倒计时方法，计算秒杀商品距离结束时间的倒计时
        daojishi: function () {

            var strTime = '';

            //获取已经开始秒杀的商品的活动结束时间
            var dt = this.seckill_times[0].end_time;
            //把时间转换为毫秒
            //getTime:获取时间的毫秒数
            var endTime = new Date(dt).getTime();
            //获取现在时刻的毫秒数
            var nowTime = new Date().getTime();				
            //计算出活动时间
            // 向上取整
            //0.9 --0 
            //1.9 --1
            var allSeconds = -Math.floor((endTime-nowTime)/1000);

            //判断时间大小
            if(allSeconds>0){
                //倒计时减1操作
                allSeconds--;
                
                //计算天数
                //86401/一天 等于 1 余 1s
                //1天
                var days = Math.floor(allSeconds/(60*60*24));
                //计算小时
                //86501/一天 等于 1 余 101s
                //1天，0小时，1分 41秒
                var hours = Math.floor((allSeconds-days*60*60*24)/(60*60));    
                
                //计算分钟
                var minites = Math.floor((allSeconds-days*60*60*24-hours*60*60)/60);

                //计算秒
                var seconds = allSeconds-days*60*60*24-hours*60*60-minites*60

                //组装结果
                if(days>0){
                    strTime += days;
                }					
                strTime += hours+":"+minites+":"+seconds;
            }else{
                //取消倒计时
                clearInterval(this.timer);
            }
            
            this.sec_time = strTime;
        }
    },
	mounted: function() {
		//开启倒计时操作
		this.timer = setInterval(this.daojishi,1000);
	}
}
</script>

<style>

</style>
